<template>
  <div class="search_page">
    <p class="songcount">找到 {{ counttext }}</p>
    <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="单曲" name="first">
          <SongList :type="1" :value="inputValue" @songCount="getCount" @singerCount="getCount"></SongList>
        </el-tab-pane>
        <el-tab-pane label="歌手" name="second">
          <Singer :type="100" :value="inputValue"></Singer>
        </el-tab-pane>
        <el-tab-pane label="专辑" name="third">
          <Album :type="10" :value="inputValue"></Album>
        </el-tab-pane>
        <el-tab-pane label="视频" name="fourth">
          <Video :type="1014" :value="inputValue"></Video>
        </el-tab-pane>
        <el-tab-pane label="歌单" name="sive">
          <SongSheet :type="1000" :value="inputValue"></SongSheet>
        </el-tab-pane>
        <el-tab-pane label="歌词" name="seven">
          <Lyric :type="1006" :value="inputValue"></Lyric>
        </el-tab-pane>
        <el-tab-pane label="主播电台" name="eight">
          <AnchorStation :type="1009" :value="inputValue"></AnchorStation>
        </el-tab-pane>
        <el-tab-pane label="用户" name="nine">
          <User :type="1002" :value="inputValue"></User>
        </el-tab-pane>
      </el-tabs>
  </div>
</template>

<script>
// import { getCloudSearch } from '../../network/search.js'
import SongList from './SongList.vue'
import Singer from './Singer.vue'
import Album from './Album.vue'
import Video from './Video.vue'
import SongSheet from './SongSheet.vue'
import Lyric from './Lyric.vue'
import AnchorStation from './AnchorStation.vue'
import User from './User.vue'
export default {
  components: {
    SongList,
    Singer,
    Album,
    Video,
    SongSheet,
    Lyric,
    AnchorStation,
    User
  },
  data () {
    return {
      inputValue: '',
      activeName: 'first',
      counttext: ''
    }
  },
  methods: {
    handleClick (tab, event) {
      // console.log(tab, event)
    },
    getCount (counts) {
      this.counttext = counts
      console.log(counts)
    }
  },
  created () {
    this.inputValue = this.$route.params.inputvalue
    console.log(this.inputValue)
  },
  watch: {
    $route (to, from) {
      console.log('新地址：' + to.path.slice(8))
      this.inputValue = to.path.slice(8)
    }
  }
}
</script>

<style lang="less" scoped>
  .search_page {
    width: 82%;
    margin: 20px 0;
    overflow: auto;
    .songcount {
      font-size: 20px;
      margin-left: 30px;
      font-weight: 700;
    }
    .el-tabs {
      width: 95%;
      margin: 10px auto;
    }
  }
  /deep/.el-tabs__item {
    font-size: 18px;
  }
</style>
